<template>
    <div class="person">
        <h2>name:{{ name }}</h2>
        <h2>age:{{ age }}</h2>
        <h2>count:{{ count }}</h2>
        <button class="mr" @click="showTel">打印</button>
        <button class="mr" @click="changName">修改name</button>
        <button class="mr" @click="changeAge">修改age</button>
        <button class="mr" @click="changeCount">修改count</button>
        <div>{{ personList }}</div>
    </div>
</template>
<script lang="ts" setup name="Person123">
import { ref } from "vue"
import countAdd from "../hooks/countAdd"
const { count, changeCount } = countAdd()

defineProps(["personList"])

let name = ref("sunliang")
let age = ref(18)
// let count = ref(100)
let tel = 17853688206


function showTel() {
    alert(tel)
}
function changName() {
    name.value += "~"
}
function changeAge() {
    age.value += 1
}
// const changeCount = () => {
//     count.value += 2
// }

</script>

<style scoped>
.person {
    height: 300px;
    background: rgb(194, 138, 138);
}

.mr {
    margin-right: 10px;
}
</style>